<template>
    <div class="list-container">
        <NavCard></NavCard>
        <BreadCrumb class="bread-crumb" />
        <h2 class="title">预警类型列表</h2>
        <div class="detail">
            <div class="filter">
                <el-select v-model="drugType" placeholder="请选择药品类型">
                    <el-option v-for="item in drugOptions" :key="item.value" :label="item.label" :value="item.value">
                    </el-option>
                </el-select>
                <el-input class="search-input" placeholder="请输入医师姓名搜索..." prefix-icon="el-icon-search"
                    v-model="keyword">
                </el-input>
            </div>
            <div class="table">
                <el-table :data="tableData" border fit style="width: 100%" header-cell-class-name="table-header-cell"
                    :class="tableData.length === 0 ? 'table-empty' : ''" v-loading="loading" @selection-change="handleSelectionChange">
                  <el-table-column type="selection" width="55" align="center" />
                  <el-table-column
                    label="序号"
                    type="index"
                    width="50">
                  </el-table-column>
                  <el-table-column label="规则编号" align="center" prop="ruleNumber" />
                  <el-table-column label="预警名称" align="center" prop="name" />
                  <el-table-column label="预警数据源" align="center" prop="sourceDataType" >
                    <template slot-scope="scope">
                      <span v-if="scope.row.sourceDataType == '1'">就诊数据预警</span>
                      <span v-else >医疗机构数据预警</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="预警总数" align="center" prop="total" />
                    <el-table-column label="操作" width="300">
                        <template slot-scope="scope">
                            <div class="operation">
                                <div>查看</div>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
          <pagination
            v-show="total>0"
            :total="total"
            :page.sync="queryParams.pageNum"
            :limit.sync="queryParams.pageSize"
            @pagination="getList"
          />
        </div>
    </div>
</template>
<script>
import NavCard from '@/components/nav-card/index.vue'
import BreadCrumb from '@/components/bread-crumb/index.vue'
import { listType } from "@/api/system/type";
export default {
    name: 'MedicalStaffList',
    components: {
        NavCard,
        BreadCrumb,
    },
    data() {
        return {
          // 遮罩层
          loading: true,
          // 导出遮罩层
          exportLoading: false,
          // 选中数组
          ids: [],
          // 非单个禁用
          single: true,
          // 非多个禁用
          multiple: true,
          // 显示搜索条件
          showSearch: true,
          // 总条数
          total: 0,
          // 【请填写功能名称】表格数据
          dockorList: [],
          // 弹出层标题
          title: "",
          // 是否显示弹出层
          open: false,
          // 查询参数
          queryParams: {
            pageNum: 1,
            pageSize: 10,
            ruleNumber: null,
            time: null,
          },
          // 表单参数
          form: {},
          // 表单校验
          rules: {
          },
            keyword: '',
            drugType: null,
            drugOptions: [],
            tableConfig: [
                {
                    prop: 'order',
                    label: '序号',
                },
                {
                    prop: 'code',
                    label: '规则编号',
                },
                {
                    prop: 'name',
                    label: '预警名称',
                },
                {
                    prop: 'source',
                    label: '预警数据源',
                },
                {
                    prop: 'whiteList',
                    label: '预警白名单',
                },
            ],
            tableData: [
                {
                    order: '01',
                    code: '1101',
                    name: '计划生育预警',
                    source: '处方数据',
                    whiteList: '开/关',
                },
                {
                    order: '02',
                    code: '1101',
                    name: '计划生育预警',
                    source: '处方数据',
                    whiteList: '开/关',
                },
            ]
        }
    },
  created() {
    this.getList()
  },
  methods: {
    /** 查询【请填写功能名称】列表 */
    getList() {
      this.loading = true;
      listType(this.queryParams).then(response => {
        this.tableData = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    jupPage(){
      this.$router.push({
        path: '/riskList',
      })

    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        name: null,
        hospitalid: null,
        sex: null,
        idcard: null,
        parcticescope: null,
        parcticelevel: null,
        parcticeclass: null,
        qualification: null,
        doctorlicence: null,
        workcpet: null,
        antecedent: null,
        specialty: null,
        unit: null,
        organname: null,
        regionname: null,
        createtime: null,
        updatetime: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加【请填写功能名称】";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getDockor(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改【请填写功能名称】";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateDockor(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addDockor(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除【请填写功能名称】编号为"' + ids + '"的数据项？').then(function() {
        return delDockor(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams;
      this.$modal.confirm('是否确认导出所有【请填写功能名称】数据项？').then(() => {
        this.exportLoading = true;
        return exportDockor(queryParams);
      }).then(response => {
        this.$download.name(response.msg);
        this.exportLoading = false;
      }).catch(() => {});
    }
  }
}
</script>
<style lang="scss" scoped>
.list-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    background-color: #F7F8FD;
}

.bread-crumb {
    margin-top: 21px;
    padding-left: 20px;
}

.title {
    font-size: 26px;
    color: #4B4B4B;
    font-weight: bold;
    margin: 0;
    margin-top: 18px;
    padding-left: 20px;
}

.detail {
    margin-top: 23px;
    margin-left: 20px;
    padding: 12px 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    border-radius: 5px;

    .filter {
        display: flex;
        align-items: center;

        .el-select {
            width: 150px;
            height: 47px;
            margin-right: 11px;

            ::v-deep input {
                width: 150px;
                height: 47px;
            }
        }

        .search-input {
            width: 264px;
            height: 47px;
            background: #FFFFFF;
            border-radius: 5px;

            ::v-deep input {
                line-height: 45px;
                height: 47px;
                display: inline-block;
            }

            ::v-deep .el-input__icon {
                line-height: 45px;
                height: 45px;
                vertical-align: -0.15em;
                color: #4373F1;
            }
        }
    }

    .table {
        flex: 1;
        background-color: #fff;
        margin: 13px 0 16px;

        ::v-deep .table-header-cell {
            background-color: #EBEFF8;
            padding-left: 21px;
            font-weight: 500;
            font-size: 16px;
            color: #414141;
        }

        .el-table {
            height: 100%;
        }

        ::v-deep .el-table__cell {
            padding-left: 21px;
            font-weight: 500;
            font-size: 16px;
            color: #414141;
        }

        :v-deep .el-table__body-wrapper {
            height: 100%;
        }

        :v-deep .el-table__empty-block {
            height: 100%;
        }

        .operation {
            display: flex;
            align-items: center;
            height: 100%;

            .view,
            .edit,
            .delete {
                cursor: pointer;
                font-weight: 500;
                font-size: 16px;
                color: #414141;
                height: 16px;
                line-height: 16px;
                padding-left: 20px;
                background-repeat: no-repeat;
                background-position: 0 center;
                margin-right: 20px;
                user-select: none;
            }

            .view {
                background-image: url('~@/assets/images/table/view.png');
            }

            .edit {
                background-image: url('~@/assets/images/table/edit.png');
            }

            .delete {
                background-image: url('~@/assets/images/table/delete.png');
                margin-right: 0;
            }
        }
    }
}

.edit-box {
    display: flex;
    flex-direction: column;
    align-items: center;

    ::v-deep .el-dialog__footer {
        display: none;
    }

    .submit {
        width: 164px;
        height: 56px;
        background: #4373F1;
        border-radius: 5px;
        user-select: none;
        line-height: 56px;
        color: #fff;
        text-align: center;
        margin-top: 22px;
        cursor: pointer;
    }

    .label {
        width: 130px;
    }

    .name,
    .drugType,
    .version,
    .useType {
        display: flex;
        align-items: center;
        white-space: nowrap;
        width: 410px;
        height: 56px;
        line-height: 16px;
        background: rgba(238, 238, 238, 0.38);
        border-radius: 5px;
        border: 1px solid #E5E5E5;
        font-weight: bold;
        font-size: 16px;
        color: #505050;
        padding: 20px 22px;
        margin-bottom: 13px;

        .el-select {
            width: 100%;
        }

        ::v-deep input {
            border: none;
            background: rgba(238, 238, 238, 0.38);
        }
    }
}

::v-deep .el-dialog:not(.is-fullscreen) {
    margin-top: 20vh !important;
}
</style>
